<template>
  <div style="width: 100%;height: 100%;">
    <div :style="{'height': tableCurrent.page?'calc(100% - 42px)':'100%'}" ref="tableH">
      <!--      树形表格-->
      <template v-if="!!tableCurrent.rowKey">
        <Table size="small" ref="tableDemo" :row-key="tableCurrent.rowKey" stripe :highlight-row="!tableCurrent.noHighlightRow" :loading="tableLoading" border :columns="columns" @on-selection-change="selectTable" @on-current-change="selectSingleFile" :data="tableDataList" :height="tableCurrent.height == '100%'?tableHeight:'auot'"></Table>
      </template>
      <!--      非树形表格-->
      <template v-else>
        <Table size="small" ref="tableDemo" stripe :highlight-row="!tableCurrent.noHighlightRow" :loading="tableLoading" border :columns="columns" @on-selection-change="selectTable" @on-current-change="selectSingleFile" :data="tableDataList" :height="tableCurrent.height == '100%'?tableHeight:'auot'"></Table>
      </template>

    </div>
    <div style="text-align: right;margin: 10px;overflow: hidden;" v-if="tableCurrent.page">
      <template v-if="!!tableCurrent.small">
        <Page ref="tablePage" :total="tableTotal"  :current="page" show-elevator @on-change="changePage" />
      </template>
      <template v-else>
        <Page ref="tablePage" :total="tableTotal" show-sizer :current="page" show-elevator show-total @on-change="changePage" @on-page-size-change="changePageSize" />
      </template>
    </div>
  </div>
</template>
<script>



import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch,defineExpose} from 'vue'
import { useRouter,useRoute } from "vue-router";


/*
  * 表格数据
  * 表头
  * 加载 在数据发生变化的时候加载
  * 业务出发的方法
  * */

// tableData:{
//   defaultNoLoad:true,//默认不加载 true:不加载  false:默认加载
//   url:baseURL + "core/user/pageList", //请求地址    如果没有数据 不执行数据加载 只执行表格渲染
//   method:'post', //请求方式
//   where:searchCriteria, //搜索条件
//   height:'100%', //表格高度 auto
//   page:true, //分页是否使用
//   rowKey:'name',//使用树形数据时，必须指定 row-key，比如 id。
//  noHighlightRow:true,//  本地数据操作 不是使用行内选择
//   columns:[],  //表头数据
//   format:{ //返回数据格式
//      list:['data','records'],//数据list
//      count: ['data','total'],//数据总量
//   },
//     pagingParameters:{// 分页参数
//       page:'pageNo',
//           limit:'pageSize'
//     },
//    dataList:[],//返回静态数据
//    small:true,// 小分页
// },
//  父级调用子级刷新列表方法  $refs.wzTbale(ref名称).tableLoadData(true);  true 分页设置1刷新

// selectData:null,   //单机获取数据  父级获取子级单行选中数据 $refs.wzTbale(ref名称).selectData
// selectDataList:[], //获得表格多选  所选择的数据list 父级获取子级单行选中数据 $refs.wzTbale(ref名称).selectDataList
// 多选 获取 默认选中数据 $refs.wzTbale(ref名称).tableDataSelected()
//
//indentation 文字过多 true 缩进


//reactive
export default defineComponent({
  name: 'table',//组件名称
  components: {},//组件引用
  props: ['tableData'],//接收来自父组件的数据
  setup (props,context) {
    const state = reactive({
      tableLoading: false,
      tableDataList: [],
      page: 1,//当前页码
      limit: 10,//当前页码
      tableTotal: 0,//总条数
      tableHeight: 400,
      selectData: null,//单机获取数据 父级获取子级单行选中数据 $refs.wzTbale(ref名称).selectData
      selectDataList: [],//获得表格多选 所选择的数据list 父级获取子级单行选中数据 $refs.wzTbale(ref名称).selectDataList
      columns:[],
      tableCurrent:{},//当前页的 table 数据
    });


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    // 用于获取$refs
    const tableDemo = ref();
    const tableH = ref();



    //监听
    watch(() => props.tableData,(news, old) => {
      state.tableCurrent = toRaw(news);
    },{deep: true});


    //监听
    watch(() => props.tableData.dataList,(news, old) => {
      tableLoadData();
    },{deep: true});


    //计算高度
    const calculateHeight = ()=>{
      state.tableHeight = tableH.value.offsetHeight;
    }

    //初始化表格
    const initTable = ()=>{
      if(!state.tableCurrent.defaultNoLoad){// 默认加载  false：执行加载     true：不执行加载
        tableLoadData();
      }
      if (state.tableCurrent.height == '100%') {
        nextTick(()=> {
          calculateHeight();
          window.onresize = ()=> {
            calculateHeight();
          };
        })
      }
      var columns = state.tableCurrent.columns
      if(columns[0].type == 'index'){
        columns[0] = {
          title: '序号',align: 'center',width: 70,fixed: 'left',
          render: (h, params) => {
            if(state.tableCurrent.page){//有分页
              return h("span", params.index +(state.page - 1) * state.limit + 1);
            }else{//无分页
              return h("span", params.index + 1);
            }
          }
        }
      }

      //,indentation:true
      columns.forEach((k, i) => {
        if(k.indentation){
          k.render = (h, params) => {
            return h("Poptip",{
              class:'_wz_ivu-poptip',
              props:{
                trigger:"hover",
                maxWidth:"300",
                placement:"bottom",//right
                content:!!params.row[k.key]?params.row[k.key]:'--'
              }
            },[
              ///////////////////////////////
              h("div",{
                style: {
                  "width": "100%",
                  "overflow": "hidden",
                  "white-space": "nowrap",
                  "text-overflow": "ellipsis",
                },
              },!!params.row[k.key]?params.row[k.key]:'--')
              ///////////////////////////////
            ]);
          }
        }
      })
      // indentation
      state.columns = columns;

      // return h("span", params.index + (state.pageNum - 1) * state.pageSize + 1);

      //{type: 'index', width: 70, align: 'center', title: '序号'},
    }




    //加载表格数据
    const tableLoadData = (type)=> {//type ture 刷新分页=1
      //有数据 不请求 直接渲染
      if (!!state.tableCurrent.dataList) {
        state.tableDataList = state.tableCurrent.dataList;
        return false;
      }

      //判断是否搜索
      if (!!type) {
        if (state.tableCurrent.page) {//如果不需要分页 不传输分页数据
          state.page = 1;
        }
      }
      if (!!!state.tableCurrent.url || state.tableCurrent.url.left == 0 || state.tableCurrent.url == '') {//如果没有数据 不执行数据加载 只执行表格渲染
        return false;
      }
      state.tableLoading = true;//加载
      var searchCriteria = !!state.tableCurrent.where ? state.tableCurrent.where : {};//获取表单数据  和分页 条数
      if (state.tableCurrent.page) {//如果不需要分页 不传输分页数据
        searchCriteria.page = state.page;
        searchCriteria.limit = state.limit;
      }

      state.selectData = null;
      if (state.tableCurrent.method == 'post') {

        //分页参数 替换
        searchCriteria[state.tableCurrent.pagingParameters.page] = searchCriteria.page;
        searchCriteria[state.tableCurrent.pagingParameters.limit] = searchCriteria.limit;


        $axios.post(state.tableCurrent.url,searchCriteria).then((res) => {
          if (!!res) {
            state.tableLoading = false;
            ///列表数据 处理 不同数据结构的
            var tableDataList = res.data;
            state.tableCurrent.format.list.forEach(function (k, i) {
              tableDataList = tableDataList[k];
            })
            state.tableDataList = tableDataList;//返回数据
            if (state.tableCurrent.page) {//如果不需要分页 不传输分页数据
              ///分页数据 处理 不同数据结构的
              var tableTotal = res.data;
              state.tableCurrent.format.count.forEach(function (k, i) {
                tableTotal = tableTotal[k];
              })
              state.tableTotal = tableTotal;
              //有分页  并且不是第一页  并且 当前页没有数据  自动请求上一页
              if(state.tableDataList.length == 0 && state.page != 1){
                state.page = state.page - 1;
                tableLoadData();
              }
            }
          }
        }).catch((err) => {
          console.log("失败", err)
        })
      } else {

        //分页参数 替换
        searchCriteria[state.tableCurrent.pagingParameters.page] = searchCriteria.page;
        searchCriteria[state.tableCurrent.pagingParameters.limit] = searchCriteria.limit;
        $axios.get(state.tableCurrent.url,{params:searchCriteria}).then((res) => {
          if (!!res) {
            state.tableLoading = false;
            ///列表数据 处理 不同数据结构的
            var tableDataList = res.data;
            state.tableCurrent.format.list.forEach(function (k, i) {
              tableDataList = tableDataList[k];
            })
            state.tableDataList = tableDataList;//返回数据
            if (state.tableCurrent.page) {//如果不需要分页 不传输分页数据
              ///分页数据 处理 不同数据结构的
              var tableTotal = res.data;
              state.tableCurrent.format.count.forEach(function (k, i) {
                tableTotal = tableTotal[k];
              })
              state.tableTotal = tableTotal;
              //有分页  并且不是第一页  并且 当前页没有数据  自动请求上一页
              if(state.tableDataList.length == 0 && state.page != 1){
                state.page = state.page - 1;
                tableLoadData();
              }
            }
          }
        }).catch((err) => {
          console.log("失败", err)
        })
      }
    }
    //单行选中
    const selectSingleFile = (currentRow, oldCurrentRow)=> {
      state.selectData = JSON.parse(JSON.stringify(currentRow));//修改赋值
    }


    //返回第几页
    const changePage = (page)=> {
      state.page = page;//设置当前页数
      tableLoadData();
    }
    //设置当前页数
    const changePageSize = (size)=> {
      state.limit = size;
      tableLoadData();
    }

    //在多选模式下有效，只要选中项发生变化时就会触发
    const selectTable = (selection)=> {
      state.selectDataList = selection;
    }
    //多选 获取 默认选中数据
    const tableDataSelected = ()=>{
      return tableDemo.value.getSelection()
    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      state.tableCurrent = toRaw(props.tableData);
      initTable()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
      window.onresize = null;
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      tableDemo,//ref 使用 表格
      tableH,//ref 使用 表格高度
      tableLoadData,//表格加载方法
      selectTable,//在多选模式下有效，只要选中项发生变化时就会触发
      selectSingleFile,//单行选中
      changePage,//返回第几页
      changePageSize,//设置当前页数
      calculateHeight,//从新计算表格高度
    }
  }
})


</script>
<style lang="less">
._wz_ivu-poptip{
  width: 100%;
  .ivu-poptip-rel{
    width: 100%;
  }

  .ivu-poptip-body-content{
    white-space: pre-wrap;
    text-align: justify;
  }
}

.ivu-table-wrapper-with-border{
  border: 0px!important;
}
.ivu-table-border:after{
  width:0!important;
}
</style>
